<template>
	<div class="content">
		<div class="register">
			<!--版权登记-->
			<div class="copyrightRegistration">
				<div class="title">版权监测</div>
				<div class="text">
					<p>提供视频、文字、图片、音频等各种作品类型版权监测服务。根据权利人特定需求，实现作品全平台、全时段不间断监测，利用图文视听特征比对技术进行电子取证，并提供侵权监测分析报告。</p>
					<button class="btn-hover" @click="copyRight">发起监测需求</button>

				</div>
			</div>
			<!--优势-->
			<div class="copyrightRegistration">
				<div class="title-b">优势</div>
				<div class="text">
					<ul class="advantage ">
						<li> 监测对象覆盖广：监测范围包含中国大陆地区各类大型企事业网站，根据客户需求可提供扩充。</li>
						<li> 精准识别目标：拥有国内领先的监测技术，能够快速识别各类盗版、侵权内容。</li>
						<li> 监测报告全面：根据客户需求定制监测报告，全面展示作品在网络中的盗版数量、地域分析、变化趋势，并能对所有监测结果进行持续跟踪。</li>
					</ul>
				</div>
			</div>
			<!--监测服务流程-->
			<div class="copyrightRegistration">
				<div class="title-b">监测服务流程</div>
				<div class="text">
					<ul class="program clear">
						<li>
							<img src="../assets/u708.png" alt="">
							<p>1、在线注册</p>
						</li>
						<li>
							<img src="../assets/u1720.png" alt="">
							<p>2、发起监测需求</p>
						</li>
						<li>
							<img src="../assets/u1722.png" alt="">
							<p>3、商务洽谈、缴费</p>
						</li>
						<li>
							<img src="../assets/u1724.png" alt="">
							<p>4、开始监测</p>
						</li>
						<li>
							<img src="../assets/u1726.png" alt="">
							<p>5、监测报告</p>
						</li>
					</ul>
				</div>
			</div>
			<!--所需材料-->
			<div class="copyrightRegistration">
				<div class="title-b">所需材料</div>
				<div class="text">
					<ul class="data">
						<li>（1）作品著作权归属证明；包括著作权登记证书、作品上著作权人署名的截图或者著作权权属证明文件等等；</li>
						<li>（2）著作权人委托书（另附格式样本）；</li>
						<li>（3）委托监测作品正版样本。</li>
					</ul>
				</div>
			</div>

		</div>

	</div>
</template>

<script>
import { identityGet } from '@/api'
import { mapState, mapMutations } from 'vuex'
export default {
    data() {
        return {};
    },
    computed: {
        ...mapState([
            'croUser',
        ]),
    },
    methods: {
        ...mapMutations([
            'OUT_LOGIN',
        ]),
        copyRight() {
            if (!this.croUser) {
                this.OUT_LOGIN();
                this.$router.push('/login');
            } else {
                
                let para={
                    user_id: this.croUser.user_id
                }
                identityGet(para).then(res=>{
                    if(res.data){
                        this.$router.push("/monitoringDemand");
                    }else if(res.tologin) {
                        this.OUT_LOGIN();
                        this.$router.push('/login');
                    }else {
                        this.$message.warning('请先进行实名认证！');
                    }
                })
            }
        },
    }
};
</script>
<style lang="scss" scoped>

.content {
    min-width: 1200px;
    background-color: #f7f7f7;
    padding: 15px 0;
    .register {
        width: 1200px;
        margin: 0 auto;
        padding: 0 15px;
        border: 1px solid #e9e9e9;
        background-color: #fff;
        .copyrightRegistration {
            padding-bottom: 30px;
            & > .title {
                text-indent: 15px;
                font-size: 16px;
                font-weight: bolder;
                line-height: 3;
            }
            & > .title-b {
                text-indent: 15px;

                font-size: 16px;
                line-height: 3;
            }
            .text {
                width: 90%;
                margin: 0 auto;
                & > p {
                    font-size: 15px;
                    line-height: 1.8;
                }
                button {
                    width: 150px;
                    height: 40px;
                    color: #fff;
                    background-color: #169bd5;
                    margin: 30px auto 0;
                    display: block;
                    font-size: 15px;
                }
                .program {
                    & > li {
                        float: left;
                        width: 20%;
                        text-align: center;
                        & > img {
                            width: 50px;
                            height: 50px;
                        }
                        & > p {
                            line-height: 2;
                            font-size: 15px;
                        }
                    }
                }
                .data {
                    & > li {
                        font-size: 13px;
                        line-height: 2;
                    }
                }
                .template {
                    & > li {
                        float: left;
                        font-size: 13px;
                        line-height: 3;
                        padding: 0 15px 0 10px;
                        color: #0c569a;
                    }
                }
                .advantage {
                    & > li {
                        font-size: 13px;
                        line-height: 2;
                    }
                }
            }
        }
    }
}
.btn-hover {
	cursor: pointer;
}
</style>
